<template>
    <div class="customer-page">
        <main>
            <div class="list-box">
                <div class="list" v-for="item in list" :key="item.id">
                    <!-- {{ list }} -->

                    <div :class="[item.dir === 1 ? 'list-item1' : 'list-item2']">
                        <img class="head-img" :src="item.dir === 1 ? item.user_avatar : item.server_avatar" alt="">
                        <div class="msg-box">
                            <p class="msg" v-if="item.type === 'text'">{{ stringToEmoji(item.message) }}</p>
                            <!-- <img class="msg-img"
                                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt=""> -->
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <div class="bot-top">
                <div class="emoji" v-show="show">
                    <ul>
                        <li v-for="item in emojiList" :key="item.rule" @click="choseEmoji(item)">
                            {{ item.content }}
                        </li>
                    </ul>
                </div>
                <span @click="handleEmoji">😀</span>
                <el-icon>
                    <Picture />
                </el-icon>
            </div>
            <el-input v-model="textarea" style="width: 100%" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                placeholder="Please input" />
            <el-button class="btn" type="primary" @click="handleSend">发送</el-button>
        </footer>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { emojiList, stringToEmoji, emojiToString } from './emoji';

// 控制表情包展示隐藏
const show = ref(false)
const textarea = ref('')

const user_id = ref(2)
// 客服的id
const server_id = ref(514222)
// 存储数据
const list = ref([])

// 后端地址
const socket = new WebSocket(`ws://124.221.74.149:8003/koa/ws?user_id=${user_id.value}&server_id=${server_id.value}`);
 
// 建立连接
socket.addEventListener("open", function (event) {
    // 获取聊天记录
    socket.send(JSON.stringify({ type: 'getChatList' }));
});

// 接收数据
socket.addEventListener("message", function (event) {
    const data = JSON.parse(event.data)
    console.log(data, '数据');

    switch (data.type){
        case 'addMessage':
            // 新增的数据是追加进数组
            list.value.push(data.data)
            break;
        case 'getChatList':
            // 获取的数据是存进数组
            list.value = data.data
            return;
    }
});

// 点击展示表情框
const handleEmoji = () => {
    // 取反
    show.value = !show.value
}

// 选择表情包
const choseEmoji = (item) => {
    // 拿到表情包和文本框中的值进行拼接
    textarea.value += item.content
    // 隐藏表情包弹框
    show.value = false
}

// 发送按钮
const handleSend = () => {
    // {
    // type: 'addMessage',
    // data:{
    //     user_id: user_id.value,
    //     server_id: server_id.value,
    //     type: 'text',
    //     message: textarea.value
    // }
    // }

    console.log(emojiToString(textarea.value));

    socket.send(JSON.stringify({
        type: 'addMessage',
        data: {
            user_id: user_id.value,
            server_id: server_id.value,
            type: 'text',
            message: emojiToString(textarea.value)
        }
    }))
}

</script>

<style lang="scss" scoped>
.customer-page {
    width: 100%;
    height: 700px;
    display: flex;
    flex-direction: column;

    main {
        flex: 1;
        overflow-y: scroll;

        .list-box {
            height: 1000px;

            .list {

                .list-item1,
                .list-item2 {
                    display: flex;

                    .head-img {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        margin: 10px;
                        flex-shrink: 0;
                    }

                    .msg-box {

                        p {
                            border-radius: 10px;
                            line-height: 30px;
                            padding: 10px;
                            background-color: #eee;
                        }

                        .msg-img {
                            width: 150px;
                            height: 150px;
                            border-radius: 10px;
                        }
                    }
                }

                .list-item1 {
                    flex-direction: row-reverse;
                    text-align: right;

                    .msg-box {

                        p {
                            background-color: skyblue;
                        }
                    }
                }
            }
        }
    }

    footer {
        height: 200px;
        border-top: 1px solid #ccc;
        position: relative;

        .btn {
            position: absolute;
            bottom: 0px;
            right: 0;
        }

        .bot-top {
            height: 40px;
            display: flex;
            align-items: center;
            position: relative;

            .emoji {
                position: absolute;
                left: 0;
                top: -200px;
                width: 200px;
                height: 200px;
                // background-color: pink;
                background-color: #fff;

                ul {
                    display: flex;
                    // 换行
                    flex-wrap: wrap;

                    li {
                        margin: 8px;
                    }
                }
            }

            span {
                margin: 0 10px;
            }
        }
    }
}
</style>